<script setup lang="ts">
import { ref } from 'vue'
import Title from './Title.vue'
import type { Transaction } from '../types'

interface Props {
  transactionArr: Transaction[]
}

defineProps<Props>()
const emit = defineEmits<{
  (e: 'transactionDeleted', id: number): void
}>()
</script>
<template>
  <Title>历史记录</Title>
  <ul class="list" id="list">
    <template v-for="item of transactionArr">
      <li :class="[item.amount < 0 ? 'minus' : 'plus']">
        <span>{{ item.title }}</span>
        <span>{{ item.amount }}</span>
        <button class="delete-btn" @click="emit('transactionDeleted', item.id)">X</button>
      </li>
    </template>
  </ul>
</template>

<style lang="scss" scoped>
@import '../scss/_variables.scss';

.list {
  list-style: none;
  padding: 0;
  li {
    margin: 10px 0;
    padding: 10px;
    background-color: $board-bgColor;
    box-shadow: $box-shadow;
    // 布局
    display: flex;
    justify-content: space-between;
    // 为了让button脱离文档流
    position: relative;

    &.plus {
      border-right: 5px solid $plus-color;
    }

    &.minus {
      border-right: 5px solid $minus-color;
    }

    .delete-btn {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-100%, -50%);

      font-size: 20px;
      line-height: 20px;
      background-color: red;
      color: white;
      border: none;
      cursor: pointer;

      // 控制隐藏和现实
      opacity: 0;
      transition: opacity 0.25 ease;
    }

    &:hover {
      .delete-btn {
        opacity: 1;
      }
    }
  }
}
</style>
